<template>
	<view class="privilege">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{ title }}</block>
		</cu-custom>			
		<view class="top">
			<my-head :categroy="0" :showPad="showPad"></my-head>
			<alert-rich :source="agre" :show="showAgre" @on-close="showAgre = false"></alert-rich>
			<view class="agreement" @click="showAgre = true" v-if="showAlter">
				<view><image src="/static/agre.png"></image>查看{{ rule }}</view>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y>
				<slot></slot>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MyHead from '@/components/head'
	import AlertRich from '@/components/richtext'
	export default {
		props: {
			agre: {
				type: String,
				default: ''
			},
			title: String,
			showAlter: {
				type:Boolean,
				default: false
			},
			showPad: {
				type: Boolean,
				default: false
			},
			rule: String
		},
		data () {
			return {
				showAgre: false
			}
		},
		components: { MyHead, AlertRich }
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less'; 
.privilege {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex-flow: column;
	.top {
		.agreement{
			height: @height;
			line-height: @height;
			background-color:#f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			.border-bottom;
			&> view{
				font-size: @medium;					
				display: flex;
				align-items: center;
				justify-content: center;
				color: #0099ff;
				image {
					display: block;
					width: 35upx;
					height: 35upx;
					margin-right: 10upx;
				}
			}
		}		
	}
	.main {
		flex: 1;
		overflow: hidden;
		scroll-view {
			height: 100%;
		}
	}
}	
</style>
